<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="/layouts/default">
<th:block layout:fragment="title">
    数据库列表
</th:block>
<!-- head -->
<th:block layout:fragment="head">
    <!--页面自定义样式-->
    <style>
        /** style */
        .inputWidth {
            width: 270px
        }

        .inputUrlWidth {
            width: 500px
        }
    </style>
</th:block>
<!-- content -->
<th:block layout:fragment="content">


    <!--数据区域-->
    <el-row class="fn-clear">
        <el-col class="fn-tal" :span="18">
            <el-button @click="openDialog('new')" type="primary" plain>添加</el-button>
        </el-col>
    </el-row>

    <el-table fixed class="fn-mt10" :data="data_group.list" highlight-current-row @selection-change="onSelectionChange">
        <el-table-column prop="dbName" label="名称（唯一）" align="center" min-width="10%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="url" label="URL" align="center" min-width="15%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="driver" label="driver" align="center" min-width="15%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center" min-width="10%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="password" label="密码" align="center" min-width="10%" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="schema" label="schema" align="center" min-width="15%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="center" label="操作" min-width="15%">
            <template scope="scope">
                <el-button @click="deleteById(scope.row)" icon="el-icon-delete" circle size="small"></el-button>
                <el-button @click="openDialog('edit',scope.row.id)" icon="el-icon-edit" circle size="small"></el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" min-width="5%" label="操作" fixed="right">
            <template scope="scope">
                <el-button @click="showTables(scope.row.id)" type="text" size="small">查看表</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- 新建/编辑弹出框start -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="68%">
        <el-form label-width="150px" :model="form" :rules="rules" ref="form" label-position="right">
            <el-form-item class="fn-ml30" label="名称（唯一）：" prop="dbName">
                <el-input v-model="form.dbName" class="inputWidth"></el-input>
            </el-form-item>
            <el-form-item class="fn-ml30" label="URL：" prop="url">
                <el-input v-model="form.url" class="inputUrlWidth"></el-input>
            </el-form-item>
            <el-form-item class="fn-ml30" label="driver：" prop="driver">
                <el-select v-model="form.driver" clearable placeholder="请选择" class="inputWidth">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="fn-ml30" label="用户名：" prop="username">
                <el-input v-model="form.username" class="inputWidth"></el-input>
            </el-form-item>
            <el-form-item class="fn-ml30" label="密码：" prop="password">
                <el-input v-model="form.password" class="inputWidth"></el-input>
            </el-form-item>
            <el-form-item class="fn-ml30" label="schema：" prop="schema">
                <el-input v-model="form.schema" class="inputWidth"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="danger" @click="testConn">测试</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 新建/编辑弹出框end   -->


</th:block>

<!-- js -->
<th:block layout:fragment="js">
    <!--页面js-->
    <script>
        $UU.init({
            data: {
                loading: false,
                dialogFormVisible: false,
                importFormVisible: false,
                dialogTitle: "",
                search_group: {
                    id: null,
                    dbName: null,
                    url: "",
                    driver: "",
                    username: "",
                    password: "",
                    schema: null,
                    catalog: null,
                    dbType: null
                },
                data_group: {
                    active: 'active',
                    list: [{}, {}, {}],
                    multipleSelection: [],
                    multipleTable: [],
                    //分页
                    pagination: {
                        index: 1, //当前页码
                        size: 10, //每页记录数
                        total: 100 //记录总数
                    }
                },
                form: {
                    id: null,
                    dbName: null,
                    url: "",
                    driver: "",
                    username: "",
                    password: "",
                    schema: null,
                    catalog: null,
                    dbType: null
                },
                options: [{
                    value: 'com.mysql.jdbc.Driver',
                    label: 'Mysql'
                }],
                rules: {
                    dbName: [
                        {required: true, message: '请输入数据库名称', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入数据库url', trigger: 'blur'}
                    ],
                    driver: [
                        {required: true, message: '请输入driver', trigger: 'blur'}
                    ],
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    schema: [
                        {required: true, message: '请输入schema', trigger: 'blur'}
                    ]
                }
            },
            created: function () {
                console.log("vue created");
                this.query();
            },
            mounted: function () {
                console.log("vue mounted");
            },
            watch: {
                //监听数据
                "$data.data_group.multipleSelection": function (multipleSelection) {
                    if (multipleSelection.toString().length > 0) {
                        this.search_group.btn_disabled = false;
                    } else {
                        this.search_group.btn_disabled = true;
                    }
                }
            },
            methods: {
                resetForm: function (formName) {
                    var _this = this;
                    _this.$refs[formName].resetFields();
                    _this.search_group.vinListStr = '';
                },
                onCurrentPageChange: function (index) {
                    var _this = this;
                    _this.data_group.pagination.index = index;
                    this.query();
                },
                onPageSizeChange: function (size) {
                    var _this = this;
                    _this.data_group.pagination.size = size;
                    this.query();
                },
                query: function () {
                    var _this = this;
                    //清空选中的数据
                    _this.data_group.multipleSelection = "";
                    //处理VIN
                    var vinStr = $UF.getTextAreaArray(_this.search_group.vinListStr);
                    if (vinStr.length > 0) {
                        _this.search_group.vinList = (vinStr).split(",");
                    }
                    //请求参数
                    var req = {
                        pageNo: _this.data_group.pagination.index,
                        pageSize: _this.data_group.pagination.size,
                        param: _this.search_group
                    };
                    $UU.http.get("/getDbList",
                        req
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            _this.data_group.list = response.data.data;
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                openDialog: function (type, id) {
                    var _this = this;
                    if (_this.$refs.form !== undefined) {
                        _this.$refs.form.clearValidate();
                    }
                    if (type === 'new') {
                        _this.dialogFormVisible = true;
                        _this.dialogTitle = "新增";
                        _this.form = {
                            id: null,
                            dbName: null,
                            url: "",
                            driver: "",
                            username: "",
                            password: "",
                            schema: null,
                            catalog: null,
                            dbType: null
                        }
                    } else if (type === 'edit') {
                        _this.dialogFormVisible = true;
                        _this.dialogTitle = "编辑";
                        var id = id;
                        _this.getById(id);
                    } else if (type === 'delete') {
                        if (_this.data_group.multipleSelection.length === 0) {
                            _this.$message.warning("请选择一条数据！");
                        } else {
                            var ids = '';
                            for (var i = 0; i < _this.data_group.multipleSelection.length; i++) {
                                if (i == 0) {
                                    ids = _this.data_group.multipleSelection[i].id;
                                } else {
                                    ids += "," + _this.data_group.multipleSelection[i].id;
                                }
                            }
                            _this.deleteById(ids);
                        }
                    }
                },
                submitForm: function (formName) {
                    var _this = this;
                    _this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            _this.$confirm('确定操作吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(function () {
                                if (_this.dialogTitle === "新增") {
                                    _this.save();
                                } else if (_this.dialogTitle === "编辑") {
                                    _this.update();
                                }
                            }).catch(function () {
                            });
                        }
                    });
                },
                onSelectionChange: function (val) {
                    this.data_group.multipleSelection = val;
                },
                testConn: function () {
                    var _this = this;
                    $UU.http.post("/test", _this.form, function (response) {
                        if (response.data.code === 0) {
                            _this.$message.success(response.data.msg);
                        } else {
                            _this.$message.error(response.data.msg);
                        }
                    }, {})
                },
                getById: function (id) {
                    var _this = this;
                    //请求参数
                    var req = {};
                    $UU.http.get("/getByDbId?id=" + id,
                        req
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            _this.form = response.data.data;
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                deleteById: function (row) {
                    var _this = this;
                    _this.$confirm('确定操作吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        //请求参数
                        var req = {};
                        $UU.http.get("/delete?id=" + row.id,
                            req
                            , function (response) {
                                //获取回调数据
                                console.log(response.data);
                                if (response.data.code === 0) {
                                    _this.query();
                                } else {
                                    _this.$message.error(response.data.msg);
                                }
                            });
                    }).catch(function () {
                    });
                },
                setData: function () {
                    var _this = this;
                },
                save: function () {
                    var _this = this;
                    console.info(_this.form);
                    $UU.http.post("/save",
                        _this.form
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            if (response.data.code === 0) {
                                _this.$message.success(response.data.msg);
                                _this.dialogFormVisible = false;
                                _this.query();
                            } else {
                                _this.$message.error(response.data.msg);
                            }
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                update: function () {
                    var _this = this;
                    _this.setData();
                    $UU.http.put("/edit",
                        _this.form
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            if (response.data.code === 0) {
                                _this.$message.success(response.data.msg);
                                _this.dialogFormVisible = false;
                                _this.query();
                            } else {
                                _this.$message.error(response.data.msg);
                            }
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                handleCurrentChange: function (val) {
                    if (null !== val) {
                        this.data_group.multipleSelection = val.id;
                    }
                },
                showTables: function (id) {
                    window.parent.document.getElementById("content").src = $UC.ctxPath + "/to-table-list?id=" + id;
                }
            }
        });
    </script>
</th:block>
</html>
